import './index.less'
import { inject, observer} from 'mobx-react';
import {
    WeaInput,
    WeaSelect,
    WeaBrowser,
    WeaDatePicker,
    WeaTimePicker,
    WeaTools,
    WeaErrorPage,
    WeaLocaleProvider
} from 'ecCom'
import WeaSelectTransfer from '../wf-selectitem-browser/index'
import isEmpty from 'lodash/isEmpty'
const getLabel = WeaLocaleProvider.getLabel;

let _this;
@observer
class Main extends React.Component{
    constructor(props) {
        super(props);
        _this = this;
        this.state = {
            value1: null,
            value2: null
        }
    }
    componentWillMount(){
        this.syncFormValue(this.props);
    }
    componentDidMount(){
        const {customType,options} = this.props.config;
        //选择框给form设置默认值
        if((customType === "SELECT_AFTER_BROWSER" || customType === "SELECT_FIELD_CONDITION") && !this.state.value1){
            const defSelectValue = WeaTools.getSelectDefaultValue(options);
            this.changeHandler1(defSelectValue); 
        }else if(customType === "NUMBER_RANGE"){
            this.numberRangeResize();
        }
    }
    componentWillReceiveProps(nextProps){
        this.syncFormValue(nextProps);
    }
    shouldComponentUpdate(nextProps, nextState){
        return this.state.value1 !== nextState.value1
            || this.state.value2 !== nextState.value2
    }
    syncFormValue(props){
        const formValue = this.getFormObj(props).value;
        if(!isEmpty(formValue)){
            const value1 = formValue[0];
            const value2 = formValue.length>1 ? formValue[1] : null;
            this.setState({value1, value2});
        }else{
            if(!formValue){   //重置动作
                const formObj = this.getFormObj(this.props);
                const {customType,options} = this.props.config;
                let defValue1 = "";
                if(customType === "SELECT_AFTER_BROWSER" || customType === "SELECT_FIELD_CONDITION")
                    defValue1 = WeaTools.getSelectDefaultValue(options);
                formObj.onChange && formObj.onChange([defValue1, ""]);
            }
        }
    }
    getFormObj(props){
        const { form,config } = props; 
        return form.$(WeaTools.getKey(config));
    }
    numberRangeResize(){
        let inputWidth = jQuery(".number-range").width() - jQuery(".number-opt").width() - 2;
        if(inputWidth < 0)
            inputWidth = "60%";
        jQuery(".number-input").width(inputWidth);
    }
    changeHandler1(v){
        this.setState({value1: v});
        const formObj = this.getFormObj(this.props);
        formObj.onChange && formObj.onChange([v, this.state.value2]);
    }
    changeHandlerSingle(...args){
        //const value2 = args.length > 1 ? args : args[0];
        const value2 = args[0];
        this.setState({value2: value2});
        const formObj = this.getFormObj(this.props);
        formObj.onChange && formObj.onChange([this.state.value1, value2]);
    }
    changeHandlerBrowser(...args){ 
        const value2 = args;
        this.setState({value2: value2});
        const formObj = this.getFormObj(this.props);
        formObj.onChange && formObj.onChange([this.state.value1, value2]);
    }

    numberFilter(value) {
        let regExp = /^(-?\d+)((\.\d+))?$/;
        if(regExp.test(value)) {
            return value;
        } else {
            return '';
        }
    }

    render(){
        const { form,config } = this.props; 
        //console.log("domkey--", config.domkey, "formValRender--", this.getFormObj(this.props).value);
        const { value1,value2 } = this.state;
        const {customType,domkey,options,browserConditionParam,otherParams} = config;
        let domArr = [];
        if(customType === "SELECT_AFTER_BROWSER" || customType === "SELECT_FIELD_CONDITION"){
            domArr.push(<div className="head-area">
                <WeaSelect options={options} value={value1} onChange={this.changeHandler1.bind(this)} />
            </div>);
        }

        if(customType === "NUMBER_RANGE"){
            domArr.push(<div className="number-range" style={{float:"left"}}>
                <div className="number-opt">{getLabel(516553,"大于或等于")}</div>
                <div className="number-input"><WeaInput value={value1} onChange={this.changeHandler1.bind(this)} filter={this.numberFilter.bind(this)} /></div>
            </div>);
            //domArr.push(<br />);
            domArr.push(<div className="number-range" style={{float:"right"}}>
                <div className="number-opt">{getLabel(516554,"小于或等于")}</div>
                <div className="number-input"><WeaInput value={value2} onChange={this.changeHandlerSingle.bind(this)} filter={this.numberFilter.bind(this)} /></div>
            </div>);
        }else if(customType === "SELECT_AFTER_BROWSER"){
            const  showDropMenu = browserConditionParam.type == '4' || browserConditionParam.type == '164'; //部门分部显示维度菜单
            domArr.push(<div className="tail-area browser-area">
                <WeaBrowser 
                    showDropMenu = {showDropMenu} layout = {document.body}
                    {...browserConditionParam}
                    value={value2 && value2[0]}
                    valueSpan={value2 && value2[1]}
                    valueObj={value2 && value2[2]}
                    replaceDatas={value2 ? mobx.toJS(value2[2]) : []}
                    onChange={this.changeHandlerBrowser.bind(this)}
                />
            </div>);
        }else if(customType === "DATE_TO_DATE"){
            domArr.push(<div className="cus-query-daterange">
                <span className="span-beg">{getLabel(83838,"从")}</span>
                <span><WeaDatePicker noInput={true} value={value1} onChange={this.changeHandler1.bind(this)} /></span>
                <span className="span-end">{getLabel(516555,"到")}</span>
                <span><WeaDatePicker noInput={true} value={value2} onChange={this.changeHandlerSingle.bind(this)} /></span>
            </div>);
        }else if(customType === "DATETIME_TO_DATETIME"){
            domArr.push(<div className="cus-query-daterange">
                <span className="span-beg">{getLabel(83838,"从")}</span>
                <span><WeaDatePicker noInput={true} style={{width:'auto'}} value={value1} onChange={this.changeHandler1.bind(this)} showTime format={"yyyy-MM-dd HH:mm"}/></span>
                <span className="span-end">{getLabel(516555,"到")}</span>
                <span><WeaDatePicker noInput={true} style={{width:'auto'}} value={value2} onChange={this.changeHandlerSingle.bind(this)} showTime format={"yyyy-MM-dd HH:mm"}/></span>
            </div>);
        }else if(customType === "TIME_TO_TIME"){
            domArr.push(<div className="cus-query-timerange">
                <span className="span-beg">{getLabel(83838,"从")}</span>
                <span><WeaTimePicker noInput={true} value={value1} onChange={this.changeHandler1.bind(this)} /></span>
                <span className="span-end">{getLabel(516555,"到")}</span>
                <span><WeaTimePicker noInput={true} value={value2} onChange={this.changeHandlerSingle.bind(this)} /></span>
            </div>);
        }else if(customType === "SELECT_FIELD_CONDITION"){
            const detailtype = otherParams.detailtype;
            if(detailtype === 2){   //复选框对应选择框
                domArr.push(<div className="tail-area">
                    <WeaSelect options={otherParams.options} value={value2} onChange={this.changeHandlerSingle.bind(this)} />
                </div>);
            }else{      //选择框对应穿梭多选框
                domArr.push(<div className="tail-area">
                    <WeaSelectTransfer {...otherParams} value={value2} onChange={this.changeHandlerSingle.bind(this)} />
                </div>);
            }
        }
        return <div className="cus-query-condition">{domArr}</div>;
    }
}

jQuery(window).resize(function() {
    _this && _this.numberRangeResize();
});

export default WeaTools.tryCatch(React, 
    props => <WeaErrorPage msg={ props.error ? props.error : '对不起，该页面异常，请联系管理员！'} />,
    {error: ""}
)(Main);